<template>

    <div class="tr">
        <div class="title" @dblclick="handleDblclick">
            <div class="title-left"><img class="logo-left" src="/static/images/logo-left.png" alt=""></div>
            <div class="title-middle">
                <div>
                    <Decoration7 style="height: 100%;">***智能仓数据看板</Decoration7>
                </div>
            </div>
            <div class="title-right"><img class="logo-right" src="/static/images/logo-right.png" alt=""></div>
        </div>
        <div class="top"
            :style="{ height: formatConfigData.topHeight, gridTemplateColumns: formatConfigData.topGridTemplateColumns }">
            <div class="top-itm" v-for="(itm, index) in formatConfigData.topList" :key="index">
                <component @aaaa="aaaa" :is="chartComponents[itm.components]" :data="itm" />
                <!-- {{ itm }} -->
            </div>
            <!-- <div class="top5">
               
            </div> -->
        </div>
        <div class="line" :style="{ height: formatConfigData.topLineHeight }">
            <Decoration2 style="width:100%;height:5px;" />
        </div>
        <div class="bottom" :style="{ height: formatConfigData.bottomHeight, width: '100%' }">

            <div class="bottom-itm" style="flex:1;" v-for="(itm, index) in formatConfigData.bottomList" :key="index">
                <component :is="chartComponents[itm.components]" :data="itm" />
            </div>

        </div>
    </div>
    <wmsWhConfig ref="refWmsWhConfig" @emitGetDataEv="wmsWhConfigEv" />
</template>

<script setup>
import { ref, reactive, computed, onMounted, onActivated, onUnmounted } from 'vue'
import { loadingStore } from '@/stores/index.js'
import wmsWhConfig from '@/components/chart/wmsWh.vue'
import { myScale } from '@/utils/myScale.js'
import { chartComponents } from '@/utils/chart.js'
import * as echarts from 'echarts';
// https://github.com/xfy520/vue3-seamless-scroll

// import { BorderBox1 } from '@dataview/datav-vue3'
import { BorderBox13, BorderBox8, Decoration7, Decoration2 } from '@dataview/datav-vue3'


const loading = loadingStore()




const refTable1 = ref(null)





const refWmsWhConfig = ref(null)

// fontWeight：normal(正常)、bold(加粗)
const configData = reactive({

    backgroundColor: 'rgba(19, 44, 108, 1)',
    backgroundImages: '',
    titleName: '***智能仓数据看板',
    titleFontSize: 30,
    titleFontWeight: 'bold',
    titleFontColor: 'rgba(255, 255, 255, 1)',
    titleLeftLogo: '',
    titleLeftLogoWidth: 30,
    titleRightLogo: '',
    titleRightLogoWidth: 60,
    titleHeight: 60,
    topHeight: 250,
    topLineHeight: 20,
    topList: [{
        components: 'panel',
        // 背景颜色
        backgroundColor: 'rgba(19, 44, 108, 0)',
        // 边框颜色1
        borderColor1: '#6586ec',
        // 边框颜色2
        borderColor2: '#2CF7FE',
        // 大标题字体大小
        nameFontSize: 25,
        // 大标题字体颜色
        nameFontColor: 'rgba(255,255,255, 1)',
        nameHeight: 70,
        // 二级标题字体大小
        titleFontSize: 20,
        // 二级标题字体颜色
        titleFontColor: 'rgba(255,255,255, 1)',
        titleHeight: 60,
        // 内容字体大小
        contentFontSize: 30,
        // 内容字体颜色
        contentFontColor: 'rgba(219,156,28, 1)',
        // 分割线颜色
        lineBackgroundColor: 'rgba(255,255,255, 1)',
        lineHeight: 2,

        text: {
            sql: '',
            name: '入库信息',
            titleLeft: '当日待入库',
            contentLeft: '4pcs/7单',
            titleRight: '当日待入库',
            contentRight: '4pcs/7单',
        }
    },
    {
        components: 'panel',
        // 背景颜色
        backgroundColor: 'rgba(19, 44, 108, 0)',
        // 边框颜色1
        borderColor1: '#6586ec',
        // 边框颜色2
        borderColor2: '#2CF7FE',
        // 大标题字体大小
        nameFontSize: 25,
        // 大标题字体颜色
        nameFontColor: 'rgba(255,255,255, 1)',
        nameHeight: 70,
        // 二级标题字体大小
        titleFontSize: 20,
        // 二级标题字体颜色
        titleFontColor: 'rgba(255,255,255, 1)',
        titleHeight: 60,
        // 内容字体大小
        contentFontSize: 30,
        // 内容字体颜色
        contentFontColor: 'rgba(219,156,28, 1)',
        // 分割线颜色
        lineBackgroundColor: 'rgba(255,255,255, 1)',
        lineHeight: 2,
        text: {
            sql: '',
            name: '入库信息',
            titleLeft: '当日待入库',
            contentLeft: '4pcs/7单',
            titleRight: '当日待入库',
            contentRight: '4pcs/7单',
        }
    },
    {
        components: 'panel',
        // 背景颜色
        backgroundColor: 'rgba(19, 44, 108, 0)',
        // 边框颜色1
        borderColor1: '#6586ec',
        // 边框颜色2
        borderColor2: '#2CF7FE',
        // 大标题字体大小
        nameFontSize: 25,
        // 大标题字体颜色
        nameFontColor: 'rgba(255,255,255, 1)',
        nameHeight: 70,
        // 二级标题字体大小
        titleFontSize: 20,
        // 二级标题字体颜色
        titleFontColor: 'rgba(255,255,255, 1)',
        titleHeight: 60,
        // 内容字体大小
        contentFontSize: 30,
        // 内容字体颜色
        contentFontColor: 'rgba(219,156,28, 1)',
        // 分割线颜色
        lineBackgroundColor: 'rgba(255,255,255, 1)',
        lineHeight: 2,
        text: {
            sql: '',
            name: '入库信息',
            titleLeft: '当日待入库',
            contentLeft: '4pcs/7单',
            titleRight: '当日待入库',
            contentRight: '4pcs/7单',
        }
    },
    {
        components: 'panel',
        // 背景颜色
        backgroundColor: 'rgba(19, 44, 108, 0)',
        // 边框颜色1
        borderColor1: '#6586ec',
        // 边框颜色2
        borderColor2: '#2CF7FE',
        // 大标题字体大小
        nameFontSize: 25,
        // 大标题字体颜色
        nameFontColor: 'rgba(255,255,255, 1)',
        nameHeight: 70,
        // 二级标题字体大小
        titleFontSize: 20,
        // 二级标题字体颜色
        titleFontColor: 'rgba(255,255,255, 1)',
        titleHeight: 60,
        // 内容字体大小
        contentFontSize: 30,
        // 内容字体颜色
        contentFontColor: 'rgba(219,156,28, 1)',
        // 分割线颜色
        lineBackgroundColor: 'rgba(255,255,255, 1)',
        lineHeight: 2,
        text: {
            sql: '',
            name: '入库信息',
            titleLeft: '当日待入库',
            contentLeft: '4pcs/7单',
            titleRight: '当日待入库',
            contentRight: '4pcs/7单',
        }
    }],
    bottomList: [
        {
            components: 'pie',
            // 背景颜色
            backgroundColor: 'rgba(19, 44, 108, 0)',
            // 边框颜色1
            borderColor1: '#6586ec',
            // 边框颜色2
            borderColor2: '#2CF7FE',
            config: {
                title: {
                    text: '当日入库排名1',
                    left: 'left',
                    textStyle: {
                        // fontWeight: "bold", //标题自提提粗细
                        fontSize: 20, //标题字体大小
                        color: '#FFFFFF', // 文字颜色 //标题字体颜色
                    },
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: '40%',
                        center: ['50%', '50%'], // 设置饼图中心和容器中心对齐
                        data: [
                            { value: 1048, name: '苹果' },
                            { value: 735, name: '细化' },
                            { value: 580, name: '哈密瓜' },
                            { value: 484, name: '烧烤' },
                            { value: 300, name: '小龙虾' }
                        ],
                        label: {
                            show: true, // 开启显示
                            position: 'outside', // 设置标签位置为扇区外部
                            formatter: '{b}: {d}%\n{c}', // 格式化器，显示名称、百分比和数值
                            color: '#FFFFFF', // 文字颜色
                            fontSize: 12, // 文字大小
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }, {
            components: 'scrollTable',
            // 背景颜色
            backgroundColor: 'rgba(19, 44, 108, 0)',
            // 边框颜色1
            borderColor1: '#6586ec',
            // 边框颜色2
            borderColor2: '#2CF7FE',
            sql: '',
            time: 2,
            oddBackgroundColor: 'rgba(0,59,81, 1)',
            evenBackgroundColor: 'rgba(10,39,50, 1)',
            headerBackgroundColor: 'rgba(0,125,190, 1)',
            hoverBackgroundColor: 'rgba(0,125,190, 1)',
            color: 'rgba(255,255,255, 1)',
            fontSize: 18,
            tableFiled: [
                {
                    prop: 'index',
                    label: "#",
                    width: "50"
                }, {
                    prop: 'date',
                    label: "时间",
                    width: "auto"
                }, {
                    prop: 'name',
                    label: "名称",
                    width: "auto"
                }, {
                    prop: 'address',
                    label: "地址",
                    width: "auto"
                }
            ],
            title: {
                text: '当日入库',
                fontWeight: "bold", //标题自提提粗细
                fontSize: 20, //标题字体大小
                color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色,
                height: 60,
                paddingLeft: 20,
                paddingRight: 0,
                textAlign: 'left',
                backgroundColor: 'rgba(255,255,255, 0)'
            },
        }, {
            components: 'scrollTable',
            // 背景颜色
            backgroundColor: 'rgba(19, 44, 108, 0)',
            // 边框颜色1
            borderColor1: '#6586ec',
            // 边框颜色2
            borderColor2: '#2CF7FE',
            sql: '',
            time: 2,
            oddBackgroundColor: 'rgba(0,59,81, 1)',
            evenBackgroundColor: 'rgba(10,39,50, 1)',
            headerBackgroundColor: 'rgba(0,125,190, 1)',
            hoverBackgroundColor: 'rgba(0,125,190, 1)',
            color: 'rgba(255,255,255, 1)',
            fontSize: 18,
            tableFiled: [
                {
                    prop: 'index',
                    label: "#",
                    width: "50"
                }, {
                    prop: 'date',
                    label: "时间",
                    width: "auto"
                }, {
                    prop: 'name',
                    label: "名称",
                    width: "auto"
                }, {
                    prop: 'address',
                    label: "地址",
                    width: "auto"
                }
            ],
            title: {
                text: '当日出库',
                fontWeight: "bold", //标题自提提粗细
                fontSize: 20, //标题字体大小
                color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色,
                height: 60,
                paddingLeft: 20,
                paddingRight: 0,
                textAlign: 'left',
                backgroundColor: 'rgba(255,255,255, 0)'
            },
        }, {
            components: 'scrollTable',
            // 背景颜色
            backgroundColor: 'rgba(19, 44, 108, 0)',
            // 边框颜色1
            borderColor1: '#6586ec',
            // 边框颜色2
            borderColor2: '#2CF7FE',
            sql: '',
            time: 2,
            oddBackgroundColor: 'rgba(0,59,81, 1)',
            evenBackgroundColor: 'rgba(10,39,50, 1)',
            headerBackgroundColor: 'rgba(0,125,190, 1)',
            hoverBackgroundColor: 'rgba(0,125,190, 1)',
            color: 'rgba(255,255,255, 1)',
            fontSize: 18,
            tableFiled: [
                {
                    prop: 'index',
                    label: "#",
                    width: "50"
                }, {
                    prop: 'date',
                    label: "时间",
                    width: "auto"
                }, {
                    prop: 'name',
                    label: "名称",
                    width: "auto"
                }, {
                    prop: 'address',
                    label: "地址",
                    width: "auto"
                }
            ],
            title: {
                text: '上下架',
                fontWeight: "bold", //标题自提提粗细
                fontSize: 20, //标题字体大小
                color: 'rgba(255,255,255, 1)', // 文字颜色 //标题字体颜色,
                height: 60,
                paddingLeft: 20,
                paddingRight: 0,
                textAlign: 'left',
                backgroundColor: 'rgba(255,255,255, 0)'
            },
        }

    ]
})

const formatConfigData = computed(() => {

    return {
        backgroundColor: configData.backgroundColor,
        backgroundImages: configData.backgroundImages,
        titleName: configData.titleName,
        titleFontSize: myScale(configData.titleFontSize) + 'px',
        titleFontWeight: configData.titleFontWeight,
        titleFontColor: configData.titleFontColor,
        titleLeftLogo: configData.titleLeftLogo,
        titleLeftLogoWidth: configData.titleLeftLogoWidth + '%',
        titleRightLogo: configData.titleRightLogo,
        titleRightLogoWidth: configData.titleRightLogoWidth + '%',
        titleHeight: myScale(configData.titleHeight) + 'px',
        topHeight: myScale(configData.topHeight) + 'px',
        topLineHeight: myScale(configData.topLineHeight) + 'px',
        topbottom: myScale(configData.topbottom) + 'px',
        topGridTemplateColumns: 'repeat(' + configData.topList.lenght + ', 1fr)',
        topList: configData.topList,
        bottomHeight: 'calc( 100% - ' + myScale(configData.titleHeight) + 'px - ' + myScale(configData.topHeight) + 'px - ' + myScale(configData.topLineHeight) + 'px' + ' )',
        bottomList: configData.bottomList
    }
})



onMounted(async () => {
    console.log(JSON.stringify(formatConfigData.value))
    // chartInitEv1()
    // chartInitEv2()
    // getTableEv1()
    // // 监听容器大小变化事件
    // window.addEventListener('resize', () => {
    //     console.log('发生变化')
    //     chartResizeEv()
    // });
})
onActivated(() => {

})

onUnmounted(() => {


});


const wmsWhConfigEv = (val) => {
    console.log('点击预览', val)
    console.log(configData.backgroundColor)
    console.log(val.backgroundColor)
    // configData.backgroundColor=val.backgroundColor
    Object.assign(configData, val)
}




const getTableEv1 = (t) => {
    for (let index = 0; index < 50; index++) {
        tableData.value.push({
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        })

    }
    refTable1.value.tableData = tableData.value
    refTable1.value.tableFiled = tableFiled.value
    refTable1.value.startTimerEv()
    console.log(refTable1.value)
}

const handleDblclick = () => {
    console.log('点击双击事件')
    refWmsWhConfig.value.drawer = true
    Object.assign(refWmsWhConfig.value.data, configData)
    console.log(refWmsWhConfig.value.data)
}

const aaaa = () => {
    console.log(formatConfigData.value.topList)
}

</script>

<style lang='less' scoped>
// @tr-title:  v-bind("formatConfigData.title.height");
// @tr-title:  60px;
// @tr-top: 200px;
// @tr-line: 5px;
// @tr-bottom: calc(100% - @tr-title - @tr-top - @tr-line);

.tr {
    height: 100%;
    background-color: v-bind("formatConfigData.backgroundColor");

}

.title {

    display: flex;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    height: v-bind("formatConfigData.titleHeight");

    .title-right {
        display: flex;
        justify-content: right;
        padding-right: 10px;
        box-sizing: border-box;
        flex: 1;
    }

    .logo-left {
        width: v-bind("formatConfigData.titleLeftLogoWidth");
    }

    .logo-right {
        width: v-bind("formatConfigData.titleRightLogoWidth");
    }

    .title-middle {
        font-size: v-bind("formatConfigData.titleFontSize");
        color: v-bind("formatConfigData.titleFontColor");
        font-weight: v-bind("formatConfigData.titleFontWeight");
        flex: 3;
    }

    .title-left {
        box-sizing: border-box;
        padding-left: 10px;
        flex: 1;
    }
}

.top {
    display: flex;

    .top-itm {
        flex: 1;
    }

}

.line {
    display: flex;
    align-items: center;
    height: v-bind("formatConfigData.topLineHeight");
}

.bottom {
    display: flex;


}

.dv-border-box-13 {
    padding: 10px;
    padding-top: 15px;
    box-sizing: border-box;
}
</style>